<template>
	<view class="page-body">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<!-- 头部导航 -->
		<view class="header">
			<view class="left_box" @click="goBack()">
				<image class="left_icon" mode="widthFix" src="@/static/images/leftMark_icon.png"></image>
			</view>
			<view class="title">新建线索</view>
			<view class="right_box"></view>
		</view>

		<!-- 内容 -->
		<view class="corebox">
			<view class="corebox_top">
				<image class="corebox_icon" mode="widthFix" src="@/static/images/new_clue.png"></image>
				<view class="corebox_tit">请输入客户手机号</view>
			</view>
			<view class="corebox_butsel">
				<input @input="phone_change" :value="userPhone" maxlength="11" class="input_phone" name="userPhone"
				 placeholder="请输入手机号" placeholder-class="placeholder" />
				 <image class="input_empty" v-if="isEmpty" @click="input_empty" mode="widthFix" src="@/static/images/empty.png"></image>
			</view>	
			<view class="corebox_follow" v-if="isFollow">
                <text class="follow_waring">!</text>  该客户已由销售顾问 <text style="font-size: 32rpx;font-weight: 500;margin: 0 8rpx;" >{{salesmanName}} </text> 跟进
            </view>
			<view class="corebox_but" v-else  @click="submit">下一步</view>
		</view>
	</view>
</template>

<script>
	import {
		getVerify
	} from '@/service/api/api.js';

	export default {
		components: {},
		data() {
			return {
				userInfo: {},
				userPhone: '',//存放手机号				
				isEmpty:false,// 清空input
				isFollow:false,//是否跟进
				salesmanName:'',//跟进存在名称
			}
		},
	
		onLoad(e) {
			
			try {
				this.userInfo = uni.getStorageSync('user_info')
				
			} catch (e) {
				console.log(e)
			}
		},
		onReady() {

		},
		onShow(){
			this.userPhone= ''
			this.isEmpty=false
			this.isFollow=false
			this.salesmanName=''
		},
		methods: {
			//下一步 验证手机号是否跟进
			async submit() {
				if (!this.check_phone(this.userPhone)) {
					uni.showToast({
						title: '请正确填写手机号',
						icon: 'none'
					})
					return
				}		
				//ajax 请求  跳转路由 控制isFollow  是否跟进  不跟进进入新建页面	
				let res=await getVerify({deptId:this.userInfo.userDeptId,mobile:this.userPhone})
				console.log(res.data)
				if(res.data.code==0){
					this.isFollow = res.data.data.exist // true存在，false 不存在
					this.salesmanName=res.data.data.salesmanName
					if(res.data.data.exist && res.data.data.owner){ // 存在并是本人
						console.log("跳转到跟进历史",res.data.data.uniqueId,res.data.data.id)
						// // console.log(this.userPhone)
						uni.redirectTo({
							url: `/pages/clue/clueDetails/index?id=${res.data.data.id}&uniqueId=${res.data.data.uniqueId}&phone=${this.userPhone}&followNum=${res.data.data.invalidNum || 0}&tabIdx=0&clueStatus=新建`
						})
					} else if(!res.data.data.exist) {
						uni.redirectTo({
						    url: `/pages/clue/adviser/newClueFrom/index?phone=${this.userPhone}`
						});
					}
				}
			},
			
			phone_change(e) {
				this.userPhone = e.detail.value
				if(this.userPhone){
					this.isEmpty=true
					this.isFollow=false
				}
			},
			//返回上一层
			goBack() { 
				uni.navigateBack()
			},
			//清空手机号
			input_empty(){
				this.userPhone= ''
				this.isEmpty=false
				this.isFollow=false
				this.salesmanName=''
			},
			//验证手机号
			check_phone(phone) {
				let reg = new RegExp("^[1][3,4,5,7,8][0-9]{9}$");
				return reg.test(phone)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-body {
		width: 100%;
		box-sizing: border-box;
		
		.header {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			line-height: 88rpx;
			box-sizing: border-box;
			color: #43425D;
			position: fixed;
			top: var(--status-bar-height);
			left: 0;
			z-index: 999;
			background: #fff;
			
			.left_box {
				display: flex;
				height: 100%;
				width: 150rpx;
				padding-left: 30rpx;
				align-items: center;
				
				.left_icon {
					width: 21rpx;
					height: 37rpx;
				}
			}
			
			
			.title {
				font-size: 32rpx;
				width: 100%;
				text-align: center;
			}
			
			.right_box {
				width: 250rpx;
				text-align: center;
				font-size: 26rpx;
				color: #3B86FF;
			}
		}
		
		.corebox{
			padding: 188rpx 30rpx 0 30rpx;
			background: #fff;
			.corebox_top{
				display: flex;
				justify-items: center;
				align-items: center;
				.corebox_icon{
					width:32rpx;
					height: 32rpx;
				}
				.corebox_tit{
					margin-left: 20rpx;
					color: #43425D;
					font-size: 32rpx;
				}
			}
			.corebox_butsel{
				margin-top: 112rpx;
				border-bottom: 2rpx solid #D7D7E9;
				position: relative;
				.input_phone {
					overflow: inherit;
					line-height: 72rpx;
					height: 72rpx;
					margin-left: 44rpx;
					font-size: 32rpx;
				}
			    .input_empty{
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto;
					width: 32rpx;
					height: 32rpx;
					position: absolute;
				}
			}


		}
	}
	.corebox_follow{
		// width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 100rpx auto 0;
		text-align: center;
		font-size: 28rpx;
		background: #43425D;
		color:white;
		border-radius: 4rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.follow_waring{
		display: block;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 20rpx;
		background: #F7A329;
		color:white;
		margin-right: 22rpx;
		margin-left: 24rpx;
	}
	.corebox_but{
		margin-top: 380rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;	
		font-size: 32rpx;
		color: #FFFFFF;
		background: linear-gradient(118deg, #61A4FC 0%, #3B86FF 100%);
		box-shadow: 0px 6px 15px rgba(116, 169, 255, 0.55);
		opacity: 1;
		border-radius: 4px;
	}
// 单选样式
	.myModalBox_concat_title {
		position: relative;
		margin-top: 28rpx;
		margin-bottom: 36rpx;
		color: #9a9a9a;
		font-size: 24rpx;

		.textarea {
			border-radius: 16rpx;
			min-height: 160rpx;
			border: 2rpx solid #e3e3e3;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.tagtitle {
			display: flex;
			position: relative;

			.tagtitleradio {
				opacity: 0;
			}

			.tagtitleradiosty {
				position: absolute;
				left: 10rpx;
				top: 4rpx;
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background: #ffffff;
				border: 2rpx solid #e3e3e3;
				position: absolute;
				background-clip: content-box;
				padding: 4rpx;

				&.atv {
					background: url("https://saas-pcmatg.oss-cn-beijing.aliyuncs.com/iconavtBut.png") no-repeat center center;
				}
			}
		}
	}
			
			

</style>
